<template>
  <div class="address-container">
    <el-button type="primary" @click="open">新增地址</el-button>
    <el-row :gutter="20">
      <el-col :span="8" v-for="address in addresses" :key="address.id">
        <el-card>
          <div class="address-info">
            <p>{{ address.address }}</p>
          </div>
          <div>
            <el-button size="small" @click="viewDetails(address)"
              >编辑</el-button
            >
            <el-button size="small" type="danger" @click="del(address)"
              >删除</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog v-if="showDialog" title="地址" v-model="showDialog">
      <el-form :model="selectedModel" label-width="60px">
        <el-form-item label="地址" prop="address">
          <el-input v-model="selectedModel.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as api from "@/api/address";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const showDialog = ref(false);
const selectedModel = ref({});
const viewDetails = (item) => {
  selectedModel.value = { ...item };
  open();
  // 实现查看申请详情的逻辑
};
const cancel = () => {
  showDialog.value = false;
  selectedModel.value = {};
};
const submit = async () => {
  const fn = selectedModel.value.addressId ? api.updateItem : api.addItem;
  const addressId = selectedModel.value.addressId
    ? selectedModel.value.addressId
    : null;
  const userId = selectedModel.value.userId || store.state.userInfo.userId;
  const { code, message } = await fn({
    ...selectedModel.value,
    addressId,
    userId,
  });
  if (code !== 200) {
    ElMessage.warning(message);
    return;
  }
  await getList();
  cancel();
};

const addresses = ref([]);
const getList = async () => {
  const { data } = await api.getAllList({
    userId: store.state.userInfo.userId,
  });
  addresses.value = data;
};
const open = () => {
  showDialog.value = true;
};
const del = async ({ addressId }) => {
  await api.delItem({ addressId });
  await getList();
};
getList();
</script>
<style scoped>
.address-container {
  max-width: 960px;
  margin: 20px auto;
  padding: 20px;
}

.el-card {
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px; /* 增加卡片与卡片之间的间距 */
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.address-info {
  padding: 20px; /* 增加卡片的内边距，使其看起来更大 */
}

.address-info p {
  margin: 0;
  line-height: 1.6; /* 提升行高，使文本更易于阅读 */
  color: #333;
  font-size: 16px; /* 增大字号，提升可读性 */
}

.address-info p:first-child {
  margin-bottom: 12px; /* 增加标题与详细信息之间的间距 */
  color: #000;
  font-weight: 600; /* 字体加粗，使地址名称更突出 */
  font-size: 18px; /* 地址名称的字号更大 */
}

.el-button {
  margin: 10px 5px 0; /* 调整按钮的外边距，使其与卡片底部有更好的间距 */
  padding: 8px 12px; /* 增加按钮的填充，使按钮看起来更大而易于点击 */
}

.el-col {
  display: flex;
  justify-content: center;
}
</style>
